<template>
  <div>
    <el-dialog
      v-model="show"
      :title="title"
      width="500"
      draggable
      destroy-on-close
      @close="reset"
    >
      <div>
        <el-form
          :model="formData"
          label-width="auto"
          style="max-width: 600px"
          :rules="rules"
          ref="ruleForm"
          :mode="ruleModel"
        >
          <el-form-item label="用户账号" prop="username">
            <el-input v-model="formData.username" />
          </el-form-item>
          <el-form-item label="用户密码" prop="password">
            <el-input v-model="formData.password" type="password" />
          </el-form-item>
          <el-form-item label="用户昵称">
            <el-input v-model="formData.nickname" />
          </el-form-item>
          <el-form-item label="用户等级">
            <el-select v-model="formData.level" placeholder="等级">
              <el-option label="普通" value="0" />
              <el-option label="会员" value="1" />
            </el-select>
          </el-form-item>
          <el-form-item label="手机号" v-if="type">
            <el-input v-model="formData.phone" />
          </el-form-item>
          <el-form-item label="地址" v-if="type">
            <el-input v-model="formData.address" />
          </el-form-item>
          <el-form-item label="邮箱" v-if="type">
            <el-input v-model="formData.email" />
          </el-form-item>
          <el-form-item label="生日" v-if="type">
            <el-input v-model="formData.birth" />
          </el-form-item>
          <!-- <el-form-item label="头像" v-if="type">
            <el-upload
              action="#"
              list-type="picture-card"
              :limit="1"
              ref="upload"
              :before-upload="onBeforeUpload"
            >
              <img v-if="avatar.url" :src="avatar.url" class="avatar" />
              <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
            </el-upload>
          </el-form-item> -->
          <el-form-item label="状态">
            <el-radio-group v-model="formData.status">
              <el-radio value="0">禁用</el-radio>
              <el-radio value="1">启用</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="reset">取消</el-button>
          <el-button type="primary" @click="onSubmit" :loading="loading">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { defineExpose, ref, defineEmits } from "vue";
// import { Plus } from "@element-plus/icons-vue";

const avatar = ref({
  file: null,
  url: "",
});
// const disabled = ref(false);
// const upload = ref();

const emits = defineEmits(["common"]);
const show = ref(false);
const title = ref("添加用户");
const loading = ref(false);
const type = ref(false);

const ruleForm = ref();
const rules = ref({
  username: [{ required: true, message: "请输入账号", trigger: "blur" }],
  password: [{ required: true, message: "请输入密码", trigger: "blur" }],
});

const formData = ref({
  id: null,
  username: "",
  password: "",
  nickname: "",
  status: "1",
  level: "0",
  phone: "",
  address: "",
  email: "",
  birth: "",
  avatar: "",
  flag: 1,
});

// const onBeforeUpload = (file) => {
//   avatar.value.url = URL.createObjectURL(file);
//   avatar.value.file = file;
//   disabled.value = false;
//   return false;
// };

const open = (item, type1) => {
  show.value = true;
  title.value = type1;
  if ("修改用户" === type1) {
    formData.value = item;
    // formData.value.id = item.id;
    // formData.value.username = item.username;
    // formData.value.password = item.password;
    // formData.value.nickname = item.nickname;
    formData.value.status = item.status == 0 ? "0" : "1";
    formData.value.level = item.level === 1 ? "1" : "0";
    formData.value.flag = 0;
    // avatar.value.url = item.avatar;
    // formData.value.phone = item.phone;
    // formData.value.address = item.address;
    // formData.value.birth = item.birth;
    // formData.value.email = item.email;
    // formData.value.avatar = item.avatar;
    type.value = true;
  }
};

const ruleModel = ref({
  username: "",
  password: "",
});

const onSubmit = () => {
  ruleForm.value.validate((valid) => {
    if (valid) {
      loading.value = true;

      // const promise1 = new Promise((resolve) => {
      //   emits("upload", avatar.value.file);
      //   resolve();
      // });
      // const promise2 = new Promise((resolve) => {
      //   emits("common", formData.value);
      //   resolve();
      // });
      // promise1
      //   .then(() => {
      //     return promise2;
      //   })
      //   .then(() => {
      //     // 两个请求都执行完成后的操作
      //   });

      // if (type.value) {
      //   // 修改时，才进行头像上传
      //   emits("upload", avatar.value.file);
      // }
      emits("common", formData.value);
      setTimeout(() => {
        reset();
        loading.value = false;
      }, 1000);
    }
  });
};

const reset = () => {
  formData.value = {
    id: null,
    username: "",
    password: "",
    nickname: "",
    status: "1",
    level: "0",
    phone: "",
    address: "",
    email: "",
    birth: "",
    flag: 1,
  };

  avatar.value = {
    file: null,
    url: "",
  };
  type.value = false;
  show.value = false;
};

defineExpose({
  open,
});
</script>

<style scoped lang="scss">
.avatar {
  width: 140px;
  height: 140px;
}
</style>
